<template>
    <div class="cancel-modal" :class="{ 'show' : isShow  }">
        <div class="modal_container">
            <div class="modal_close">
                <img src="@/assets/img/icon/close.png" class="icon" alt="icon" @click="closeModal(0)" />
            </div>
            <div class="modal_right">
                <img src="@/assets/img/icon/right.png" class="icon" alt="icon" @click="closeModal(1)" />
            </div>
            <div class="modal_title">
                <h3>请填写取消手术的原因</h3>
            </div>
            <div class="modal_content">
                <textarea rows="3" cols="20">填写原因</textarea>
                
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue,
        Watch
    } from 'vue-property-decorator';

    @Component


    export default class Cancel extends Vue {
        @Prop({
            type: Boolean, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: '' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数 
        }) toCancelBlock!: Boolean;

        isShow = false;

        @Watch('toCancelBlock')
        ontoCancelBlockChanged(val: boolean, oldVal: boolean) {
            this.isShow = val;
            
        }

        created() {
           
        }

        closeModal(type:any) {
            console.log(type);
            this.isShow = false;
            this.$emit('closeModal', this.isShow);
        }
    }
</script>


<style lang="scss" scoped>
    .cancel-modal {
        @include modal_bg;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: $modal_index;
        display: none;

        .modal_container {   
            height: 300px;
            width: 40%;
            @include box_shadow;

            .modal_title {
                text-align: center;
                padding: 12px;
                h3 {
                    color: #999;
                }
            }

            .modal_content {
                padding: 0 12px;
                textarea{
                    margin-top: 20px;
                    height: 230px;
                    width: 100%;
                    margin: auto;
                    font-size:0.16rem;
                    border: 1px solid #999;
                }
            }

            .modal_close,.modal_right {
                img {
                    width: 45px;
                    position: absolute;
                    right: -18px;
                    top: -18px;
                }
            }
            .modal_right{
                img{
                    left: -18px;
                }
            }
        }
    }
</style>